<template>
  <div class="auto-hi">
    <!-- 提示 -->
    <p class="auto-hi-tip" color="#909399">
      <i class="el-icon-info"></i>
      功能介绍：接受了别人的好友请求 或者 别人接受了你的好友申请之后，给对方发一段话！
    </p>
    <!-- 文本域 -->
    <el-input
      class="auto-hi-content"
      type="textarea"
      placeholder="请输入内容"
      v-model="searchInput"
      :autosize="{ minRows: 8, maxRows: 8}"
      maxlength="500"
      show-word-limit
    ></el-input>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'ToolsAutoHi',
  data() {
    return {
      searchInput: ''
    }
  },
  watch: {
    searchInput(val) {
      if (val !== this.config.Content) {
        this.debounceInput()
      }
    },
    // 解决第一次加载页面 config读取延迟导致searchInput无法读取到信息的问题
    config(val) {
      this.searchInput = val.Content
    }
  },
  computed: {
    ...mapGetters({
      config: 'nedb/autoHiConfig'
    }),
  },
  created() {
    // 读取配置
    // this.$store.dispatch('nedb/SetAutoHiConfig')
    // 节流防抖
    this.debounceInput = this._.debounce(this.debounceInput, 300)
    // 加载已保存的配置
    this.searchInput = this.config.Content
  },
  methods: {
    debounceInput() {
      let autoHi = {
        ContentType: 'Text', // 发送消息类型 Text Picture Voice Video Link File NameCard
        Content: this.searchInput, // 发送消息内容 文本，文件url，链接json，名片wxid
      }
      this.$store.dispatch('nedb/UpdateOrAddAutoHiConfig', autoHi)
    },
  },
}
</script>

<style lang="scss" scoped>
.auto-hi {
  height: 100%;
  overflow: hidden;
  .auto-hi-tip {
    height: 40px;
    line-height: 40px;
  }
  .auto-hi-tip,
  .auto-hi-content {
    margin-left: 5%;
    width: 90%;
  }
}
</style>
